<template>
    <div class="wrapper">
        <div class="row1">
            <div class="avater"><img src="https://qn.diyeetech.com/20181011-180343-53e89af0.png" alt=""></div>
            <div class="profile">
                <div class="dec">生活不止眼前的苟且，还有远方的苟且</div>
                <div class="count"> 123123作品</div>
            </div>
            <div class="button">关注</div>
        </div>
        <div class="row2">
            <img src="https://qn.diyeetech.com/20181210-184110-61da0ca4.jpg?imageView2/2/w/200" alt="">
            <img src="https://qn.diyeetech.com/20181210-184419-b9e514ee.jpg?imageView2/2/w/200" alt="">
            <img src="https://qn.diyeetech.com/20181218-104519-76e8b637.jpg?imageView2/2/w/200" alt="">
        </div>
    </div>
</template>
<style lang="less" scoped>
    .wrapper {
        .row2 {
            margin-top: 10px;
            img {
                width: px2rem(150);
                height: px2rem(150);
                border-radius: 5px;
                margin-right: 5px;
            }
        }
        .row1 {
            height: px2rem(100);
            display: flex;
            align-items: center;
            .button {
                margin-left: 5px;
                width: px2rem(100);
                height: px2rem(60);
                background: orangered;
                color: #fff;
                border-radius: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .profile {
                flex: 1;
                margin-left: 5px;
                .count {
                }
            }
            .avater {
                width: px2rem(100);
                height: px2rem(100);
                border-radius: 100%;
                border: 1px solid #eee;
                img {
                    border-radius: 100%;
                    max-width: 100%;
                    max-height: 100%;
                }
            }
        }
    }
</style>